<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!-- Kafka Producer -->
      <el-col
        :xs="24"
        :sm="24"
        :md="10"
        :lg="11"
        :xl="11"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>生产消息</span>
          </div>
          <el-form ref="form" :model="form" size="small" label-width="162px">
            <el-form-item label="Kafka Cluster" prop="cluster">
              {{ form.cluster.name }}
            </el-form-item>
            <el-form-item label="Topic Name" prop="topicName">
              {{ form.name }}
            </el-form-item>
            <el-form-item label="Key" prop="key">
              <el-input v-model="form.key" style="width: 80%" />
            </el-form-item>
            <el-form-item label="Value" prop="value">
              <el-input
                v-model="form.value"
                style="width: 80%"
                rows="5"
                type="textarea"
              />
            </el-form-item>
          </el-form>
          <div class="bottom clearfix">
            <el-button
              style="float: right; padding: 6px 9px"
              type="text"
              @click="reset"
            >重置</el-button>
            <el-button
              style="float: right; padding: 6px 9px"
              :loading="loading"
              type="primary"
              @click="doSubmit"
            >发送</el-button>
          </div>
        </el-card>
      </el-col>
      <!-- icedesign panel -->
      <el-col
        :xs="24"
        :sm="24"
        :md="14"
        :lg="13"
        :xl="13"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <vue-json-editor
            v-model="json"
            :show-btns="false"
            :expanded-on-start="true"
            :mode="'tree'"
            lang="zh"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { get, producer } from '@/api/mq/kafka/topic'
import vueJsonEditor from 'vue-json-editor'

export default {
  name: 'Producer',
  components: { vueJsonEditor },
  mixins: [crud],
  data() {
    return {
      loading: false,
      topicId: '',
      json: {},
      form: {
        id: null,
        cluster: {},
        name: '',
        key: '',
        value: ''
      }
    }
  },
  created() {
    this.topicId = this.$route.params.topicId
    this.$nextTick(() => {
      this.init()
      get(this.topicId).then(data => {
        this.form = data
      })
    })
  },
  methods: {
    reset() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          producer(this.form.cluster.id, this.form.name, this.form.key, this.form.value).then(res => {
            if (valid) {
              this.json = res
              this.notify('发送成功', 'success')
              this.loading = false
            }
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        }
      })
    }
    // ,
    // resetForm() {
    //   this.$refs['form'].resetFields()
    //   this.form = { key: '', value: '' }
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
  .el-input__inner {
    border: 1px solid #e5e6e7;
  }
}
</style>

<style scoped>
::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>

